<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <title>前端路由</title>
    <link rel="stylesheet" href="../dest/css/fui.css">
    <style>
        *{
            margin: 0;
            padding:0;
            border: 0;
        }
        html,body{
            height:100%;
        }
        .mod-a{
            height:100%;
            background: #2bad66;
        }
        .mod-b{
            height:100%;
            background: #2e8ded;
        }
        .mod-c{
            height:100%;
            background: #7b72e9;
        }
    </style>
</head>
<body>
<div class="router-warp"></div>


<script type="text/html" id="aPage">
    <div class="mod-a">
        <h1>A页面</h1>
        <p><a href="#/list">去List页面</a></p>
        <p><a href="#/desc">去Desc页面</a></p>
    </div>
</script>
<script type="text/html" id="bPage">
    <div class="mod-b">
        <h1>B页面</h1>
        <p><a href="#/index">去Index页面</a></p>
        <p><a href="#/desc">去Desc页面</a></p>
    </div>
</script>
<script type="text/html" id="cPage">
    <div class="mod-c">
        <h1>C页面</h1>
        <p><a href="#/index">去Index页面</a></p>
        <p><a href="#/list">去List页面</a></p>
    </div>
</script>

<script src="../dest/js/fui.js"></script>
<script>
    fui.use('JsRouter',function(){
        JsRouter.map([{
            path:'/index',//路由路径
            template:'aPage',//路由模板
            join:'aJoin',//进入此路由执行
            back:'aBack'//退回此路由执行
        },
            {
                path:'/list',
                template:'bPage',
                join:'bJoin',
                back:'bBack'
            },
            {
                path:'/desc',
                template:'cPage',
                join:'cJoin',
                back:'cBack'
            }
        ]);
    });


    var bJoin=function(){
        console.log('执行bJoin方法');
    };
</script>
</body>
</html>
